<template>
  <div class="bottom">
    <div class="bottom1">
      <div class="pic">
        <div class="qqq">
          <img src="../assets/logoo.png" alt="" width="50" height="50">
        </div>
       <div class="zhi">
        <p href="#">《游戏策划》智慧校园</p>
       </div>
       
      </div>
      <p class="specialtext">由高教社智慧校园推出，让每一个有提升愿望的用户能够学到中国知名高校的课程，并获得认证</p>
    </div>
    <div class="bottom2">
      <p class="guanyu">关于我们</p>
      <div class="wen1">
        <p class="kong">关于我们</p>
        <p class="kong">学校云</p>
      </div>
      <div class="wen1">
        <p class="kong">联系我们</p>
        <p class="kong">常见问题</p>
      </div>
      <div class="wen1">
        <p class="kong">意见反馈</p>
        <p class="kong">法律条款</p>
      </div>

    </div>
    <div class="bottom3">
      <p class="guanzhu">关注我们</p>
      <div class="pp">
        <img src="../assets/关注.png" alt="" width="50" height="50">
        <!-- <img src="../assets/未点赞.png" alt=""> -->
      </div>
    </div>
    <div class="bottom4">
      <p class="youqing">友情链接</p>
      <div class="wenq">
        智慧校园
      </div>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style>
.bottom {
  background-color: rgba(36, 41, 47, 1);
  width: 100%;
  height: 150px;
  margin-top: 40px;
  display: flex;
}
.qqq{
  margin-top: 20px;
}
.bottom1 {
  width: 40%;
  height: 100%;

}
.zhi{
  margin-top: 10px;
}
.pic {
  width: 100%;
  display: flex;
  margin-left: 120px;

}

.aaa {
  margin-left: 50px;
}

.pic p {
  color: rgb(153, 153, 153); /* 使用 RGB 表示的浅灰色 */
  margin-left: 20px;
  font-size: 20px;

}

.p {
  color: rgb(153, 153, 153); /* 使用 RGB 表示的浅灰色 */
}

.specialtext {
  text-align: left;
  /* 文字靠左对齐 */
  padding-left: 120px;
  margin-top: 0px;
  color: rgb(153, 153, 153); /* 使用 RGB 表示的浅灰色 */
  cursor: pointer;
  font-size: 14px;
}
.bottom2{
  width: 20%;
  height: 100%;
}
.guanyu{
  color: rgba(59, 150, 255, 1);
  margin-bottom: 5px;
  font-size: 20px;
  cursor: pointer;

}
.wen1{
  display: flex;
  text-align: center; /* 文字水平居中对齐 */
  padding-left: 95px;
  color: rgb(153, 153, 153); /* 使用 RGB 表示的浅灰色 */
  
}
.kong{
  margin-left: 5px;
  margin-bottom: 0px;
  margin-top: 5px;
  cursor: pointer;
 
  color: rgb(153, 153, 153); /* 使用 RGB 表示的浅灰色 */
  font-size: 14px;
}
.bottom3{
  width: 15%;
  height: 100%;
 
}
.guanzhu{
  color: rgba(59, 150, 255, 1);
  margin-bottom: 5px;
  font-size: 20px;
  cursor: pointer;
}
.pp{
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中对齐 */
  margin-top: 10px;
}
.pp img {
  margin: 0 5px; /* 为图片添加左右各5px的间距 */
}
.bottom4{
  width: 20%;
  height: 100%;
}
.youqing{
  color: rgba(59, 150, 255, 1);
  margin-bottom: 5px;
  font-size: 20px;
  cursor: pointer;
}
.wenq{
 
  text-align: center; /* 文字水平居中对齐 */
 margin-top: 10px;
 color: rgb(153, 153, 153); /* 使用 RGB 表示的浅灰色 */
 cursor: pointer;
 font-size: 14px;
}
</style>